<template>
	<u-navbar :leftIconSize="42" titleStyle="font-size:20px;font-weight:600" :autoBack="false"
		:placeholder='true' title="添加学员" @leftClick="goBack">
	</u-navbar>
	<view class="padding-30rpx">
		<view class="bg-white font-normal-x color-black-gray" style="padding:0 15px 0 15px;border-radius: 8px;">
			<view class="flex-al-center" style="padding: 15px 0 15px 0;">
				<text style="width: 80px;">姓名</text>
				<u-input border="none" placeholder="请输入姓名" :maxlength="20" clearable v-model="data.name"></u-input>
			</view>
			<u-line color="#00000025"></u-line>
			<view class="flex-al-center" style="padding: 15px 0 15px 0;">
				<text style="width: 80px;">身份证号</text>
				<u-input border="none" placeholder="请输入身份证号" v-model="data.idCard"></u-input>
			</view>
			<u-line color="#00000025"></u-line>
			<view class="flex-al-center" style="padding: 15px 0 15px 0;" >
				<text style="width: 80px;">科目</text>
				<view class="flex-jc-s-b" style="width: 100%;padding-left: 17px;" @click="selectSubject">
					<text v-if="data.courseObj == null" style="color:#c0c4cc">请选择科目</text>
					<text v-if="data.courseObj != null" class="color-black-gray">{{data.courseObj.name}}</text>
					<u-icon name="arrow-down"></u-icon>
				</view>
			</view>
		</view>
	</view>

	<view class="bg-white font-normal-x color-black-gray" style="padding:0 15px 0 15px;
		border-radius: 8px;margin-left: 15px;margin-right: 15px;">
		<view class="font-normal-x" style="display: flex;">
			<text style="min-width: 80px;margin-top: 3px;margin: 15px 0 15px 0;">课程时长</text>
			<view style="padding-top: 15px;">
				<u-radio-group
					v-model="data.courseName"
					iconSize="20"
					size="40">
					<u-radio
					  v-for="(item, index) in data.priceList"
					  :customStyle="{marginRight: '25px', marginBottom: '15px'}"
					  :key="index"
					  labelSize="30"
					  :label="item.name"
					  :name="item.name">
					</u-radio>
				</u-radio-group>
			</view>
		</view>
	</view>
	<u-picker :show="showSubjectPicker" ref="subjectPicker" :columns="data.subjectList" itemHeight="90"
		title="选择科目" showToolbar="false" @change="changeHandler" keyName="name"
		cancelText="" confirmText=""  @close="closePicker" closeOnClickOverlay="true"></u-picker>
	<view class="bottom-bar white-bg">
		<view class="flex-center" style="padding: 15px 15px 0 15px">
			<u-button :customStyle="{'width':'100%','margin-right':'20px'}" type="primary" shape="circle" text="保存" @click="save(true)"></u-button>
			<u-button :customStyle="{'width':'100%',margin:'0'}" type="primary" shape="circle" text="保存并继续添加" @click="saveAndContinue"></u-button>
		</view>
	</view>

	<u-popup @close="showMessage = false" :customStyle="{'border-radius': '8px'}" :show="showMessage" mode='center' :safeAreaInsetBottom="false">
		<view class="common-popup text-center">
			<view class="popup-tip">提示</view>
			<view class="popup-content">{{data.tipMessage}}</view>
			<u-button :customStyle="{'width':'132px', 'height':'40px','fontSzie': '16px'}"
				type="primary" shape="circle" text="确认" @click="showMessage = false"></u-button>
		</view>
	</u-popup>
</template>

<script setup>
	import { ref, reactive,getCurrentInstance } from "vue"
	import pageRoute from '@/utils/pageRoute'
	import { treePaidCourse, listCoursePrice, checkStudent } from "../const";
	import {onShow, onLoad} from "@dcloudio/uni-app"

	const data = reactive({
		subjectList: [],
		courseList:[],
		priceList: [],
		courseObj: null,
		courseName: null,
		priceObj: null,
		name: null,
		idCard: null,
		courseId: null,
		tipMessage: '',
		addList:[],
		selectCourse: null,
		lastCourseId: null
	})

	const showSubjectPicker = ref(false)

	const showMessage = ref(false)

	// const subjectPicker = ref(null)

	const instance = getCurrentInstance()

	const changeHandler = (e) => {
		const {columnIndex, value, values,index} = e;

		data.selectCourse = null

		let subjectPicker = instance.refs.subjectPicker
		if (columnIndex === 0) {
		  let courseList = data.courseList[index]
		  subjectPicker.setColumnValues(1, courseList)
		  let course = courseList[0]
		  data.selectCourse = course
		  data.courseName = null
		}else {
		  let course = e.value[e.value.length - 1];
		  data.selectCourse = course
		}
	};

	const closePicker = (e) => {
		let selectCourse = data.selectCourse
		if (!selectCourse) {
			return
		}
		data.courseObj = {id:selectCourse.id, name:selectCourse.name}
		showSubjectPicker.value = false
		let courseId = selectCourse.id
		if (!courseId) {
			return
		}
		if (data.lastCourseId == courseId){
			return
		}

		ajaxListCoursePrice(courseId)
		data.lastCourseId = courseId
	};

	onLoad((res) => {
		ajaxTreeCourse()
	})

	function ajaxTreeCourse() {
		treePaidCourse().then((res) => {
			let reqSubjectArray = res.rows
			let subjectArray = []
			reqSubjectArray.forEach((item)=>{
				let subject = {}
				subject.id = item.id
				subject.name = item.name
				subjectArray.push(subject)
			})
			data.subjectList.push(subjectArray)

			let courseList = []
			reqSubjectArray.forEach((item)=>{
				let children = item.children
				if (!children) {
					return
				}
				let childArray = []
				children.forEach((childItem)=>{
					let child = {}
					child.id = childItem.id
					child.name = childItem.name
					childArray.push(child)
				})
				courseList.push(childArray)
			})
			data.courseList = courseList
			data.subjectList.push(courseList[0])

			data.selectCourse = courseList[0][0]
		})
	}

	function ajaxListCoursePrice(courseId) {
		listCoursePrice(courseId).then((res) => {
			let reqPriceArray = res.rows
			reqPriceArray.forEach((item)=>{
				item.name = item.price + '元/' + item.dayAmount + '天'
			})
			data.priceList = reqPriceArray
		})
	}

	function ajaxCheckStudent(item, back) {
		item.courseId = item.courseObj.id
		checkStudent(item).then((res) => {
			data.addList.push(item)
			if (back) {
				goBack()
			}
		})
	}

	function selectSubject() {
		showSubjectPicker.value = true;
	}

	function save(back) {
		data.priceList.forEach((value)=>{
			if (value.name == data.courseName) {
				data.priceObj = value
			}
		})
		let rs = validateData()
		if (!rs) {
			return
		}

		let item = {}
		item.name = data.name
		item.idCard = data.idCard
		item.courseObj = data.courseObj
		item.priceObj = data.priceObj
		item.failHandle = checkStudentFailHandle

		ajaxCheckStudent(item, back)
	}

	function checkStudentFailHandle(res) {
		data.tipMessage = res.msg
		showMessage.value = true
	}

	function saveAndContinue() {
		save(false)
		clear()
	}

	function clear() {
		data.name = null
		data.idCard = null
		data.courseObj = null
		data.priceObj = null
		data.priceList = []
		data.lastCourseId = null
	}

	function validateData() {
		let message = ''
		if (!data.name) {
			message = '请输入姓名'
		}else if (!data.idCard) {
			message = '请输入身份证号'
		}else if(!data.courseObj) {
			message = '请选择科目'
		}else if(!data.priceObj) {
			message = '请选择课程时长'
		}else if (data.idCard.length != 18){
			message = '身份号码错误'
		}
		if (message) {
			data.tipMessage = message
			showMessage.value = true
			return false
		}

		return true
	}

	function goBack() {
		uni.$emit('addStudentList',data.addList)
		uni.navigateBack({
			delta: 1
		})
	}
</script>

<style lang="scss" scoped>
	.bottom {
		position: fixed;
		width: 100%;
		left: 0;
		bottom: 30px;
	}
</style>
